<script setup lang='ts'>
import { ref } from 'vue'
import { useTransition } from '@vueuse/core'
import { ChatLineRound, Male } from '@element-plus/icons-vue'

const tab = ref('1')
const tab1 = ref('1')
const panes = [
  {
    key: '1',
    label: '待完成',
  },
  {
    key: '2',
    label: '已完成',
  },
]
const source1 = ref(0)
const create = useTransition(source1, {
  duration: 500,
})
source1.value = 126
const source2 = ref(0)
const handled2 = useTransition(source2, {
  duration: 500,
})
source2.value = 175

const data = [
  {
    number: '10001',
    type: '客户服务流程',
    pname: '罗可 Fusionwan 流程',
    pdate: '2024-7-8 12:06:45',
    stage: '售前阶段',
    status: '待处理',
    progress: 10,
    starter: '张三',
    hander: '刘飞',
    subject: {
      sign: '理想',
      name: '罗可-华东',
      concat: '李想',
      phone: '19912345678',
    },
  },
  {
    number: '10002',
    type: '测试流程',
    stage: '销售阶段',
    hander: '刘飞',
    pname: '罗可 Fusionwan 流程2',
    pdate: '2024-7-8 12:06:45',
    status: '已处理',
    progress: 60,
    subject: {
      sign: '理想',
      name: '罗可-华东',
      concat: '李响',
      phone: '19912345678',
    },
  },
]
const completed = [
  // 生成 10 个已完成的流程
  {
    number: '10003',
    type: '客户服务流程',
    pname: '罗可 Fusionwan 流程3',
    pdate: '2024-7-8 12:06:45',
    stage: '售前阶段',
    status: '已处理',
    progress: 100,
    starter: '张三',
    hander: '刘飞',
    subject: {
      sign: '理想',
      name: '罗可-华东',
      concat: '李想',
      phone: '19912345678',
    },
  },
  {
    number: '10004',
    type: '测试流程',
    stage: '销售阶段',
    hander: '刘飞',
    pname: '罗可 Fusionwan 流程4',
    pdate: '2024-7-8 12:06:45',
    status: '已处理',
    progress: 100,
    subject: {
      sign: '理想',
      name: '罗可-华东',
      concat: '李响',
      phone: '19912345678',
    },
  },
  {
    number: '10005',
    type: '客户服务流程',
    pname: '罗可 Fusionwan 流程5',
    pdate: '2024-7-8 12:06:45',
    stage: '售前阶段',
    status: '已处理',
    progress: 100,
    starter: '张三',
    hander: '张福',
    subject: {
      sign: '理想',
      name: '罗可-华东',
      concat: '李想',
      phone: '19912345678',
    },
  },
  {
    number: '10006',
    type: '测试流程',
    stage: '销售阶段',
    hander: '刘飞',
    pname: '罗可 Fusionwan 流程6',
    pdate: '2024-7-8 12:06:45',
    status: '已处理',
    progress: 100,
    subject: {
      sign: '理想',
      name: '罗可-华东',
      concat: '李响',
      phone: '19912345678',
    },
  },
  {
    number: '10006',
    type: '测试流程',
    stage: '销售阶段',
    hander: '刘飞',
    pname: '罗可 Fusionwan 流程6',
    pdate: '2024-7-8 12:06:45',
    status: '已处理',
    progress: 100,
    subject: {
      sign: '理想',
      name: '罗可-华东',
      concat: '李响',
      phone: '19912345678',
    },
  },
  {
    number: '10006',
    type: '测试流程',
    stage: '销售阶段',
    hander: '刘飞',
    pname: '罗可 Fusionwan 流程6',
    pdate: '2024-7-8 12:06:45',
    status: '已处理',
    progress: 100,
    subject: {
      sign: '理想',
      name: '罗可-华东',
      concat: '李响',
      phone: '19912345678',
    },
  },
  {
    number: '10006',
    type: '测试流程',
    stage: '销售阶段',
    hander: '刘飞',
    pname: '罗可 Fusionwan 流程6',
    pdate: '2024-7-8 12:06:45',
    status: '已处理',
    progress: 100,
    subject: {
      sign: '理想',
      name: '罗可-华东',
      concat: '李响',
      phone: '19912345678',
    },
  },
  {
    number: '10006',
    type: '测试流程',
    stage: '销售阶段',
    hander: '刘飞',
    pname: '罗可 Fusionwan 流程6',
    pdate: '2024-7-8 12:06:45',
    status: '已处理',
    progress: 100,
    subject: {
      sign: '理想',
      name: '罗可-华东',
      concat: '李响',
      phone: '19912345678',
    },
  },
  {
    number: '10006',
    type: '测试流程',
    stage: '销售阶段',
    hander: '刘飞',
    pname: '罗可 Fusionwan 流程6',
    pdate: '2024-7-8 12:06:45',
    status: '已处理',
    progress: 100,
    subject: {
      sign: '理想',
      name: '罗可-华东',
      concat: '李响',
      phone: '19912345678',
    },
  },
  {
    number: '10006',
    type: '测试流程',
    stage: '销售阶段',
    hander: '刘飞',
    pname: '罗可 Fusionwan 流程6',
    pdate: '2024-7-8 12:06:45',
    status: '已处理',
    progress: 100,
    subject: {
      sign: '理想',
      name: '罗可-华东',
      concat: '李响',
      phone: '19912345678',
    },
  },
]
</script>

<template>
  <div flex gap-6>
    <div flex flex-1 gap-6>
      <div class="item2" flex-1 rd-8px bg-white p4 text-white>
        <h2 mb-3 text-lg>
          发起数量
        </h2>
        <div flex-between-center>
          <div class="i-material-symbols:add-chart-outline" text-2xl />
          <Stat :value="handled2" />
        </div>
      </div>
      <div class="item1" flex-1 rd-8px bg-white p4 text-white>
        <h2 mb-3 text-lg>
          处理数量
        </h2>
        <div flex-between-center>
          <div class="i-material-symbols:add-chart-outline" text-2xl />
          <Stat :value="create" />
        </div>
      </div>
    </div>
    <!--  -->
    <div flex-1 />
  </div>
  <div flex gap-6>
    <el-tabs v-model="tab" tab-position="top" mt3 flex-1 bg-white px-3 pb-3>
      <el-tab-pane label="待处理">
        <BaseTable :data="data" style="width: 100%">
          <el-table-column label="流程号" prop="number" width="70" />
          <el-table-column label="流程名称" prop="pname">
            <template #default="{ row, $index }">
              <router-link :to="`/process/${$index}`" text-primary>
                {{ row.pname }}
              </router-link>
            </template>
          </el-table-column>
          <el-table-column label="流程分类" prop="type" />
          <el-table-column label="商标名称" prop="subject.sign" width="80" />
          <el-table-column label="客户主体名称" prop="subject.name" />
          <el-table-column label="发起人" prop="starter" width="60" />
          <el-table-column label="处理人" prop="hander" width="60" />
        </BaseTable>
      </el-tab-pane>
      <el-tab-pane label="已处理">
        <BaseTable :data="completed" style="width: 100%">
          <el-table-column label="流程号" prop="number" width="70" />
          <el-table-column label="流程名称" prop="pname">
            <template #default="{ row, $index }">
              <router-link :to="`/process/${$index}`" text-primary>
                {{ row.pname }}
              </router-link>
            </template>
          </el-table-column>
          <el-table-column label="流程分类" prop="type" />
          <el-table-column label="商标名称" prop="subject.sign" width="80" />
          <el-table-column label="客户主体名称" prop="subject.name" />
          <el-table-column label="发起人" prop="starter" width="60" />
          <el-table-column label="处理人" prop="hander" width="60" />
        </BaseTable>
        <div text-center>
          <el-link type="primary" :underline="false" href="/process/pending" target="_blank" mxa my-2>
            更多
          </el-link>
        </div>
      </el-tab-pane>
    </el-tabs>
    <el-tabs v-model="tab1" tab-position="top" mt3 flex-1 bg-white px-3>
      <el-tab-pane label="主动关注">
        <BaseTable :data="data" style="width: 100%">
          <el-table-column label="流程号" prop="number" width="70" />
          <el-table-column label="流程名称" prop="pname">
            <template #default="{ row, $index }">
              <router-link :to="`/process/${$index}`" text-primary>
                {{ row.pname }}
              </router-link>
            </template>
          </el-table-column>
          <el-table-column label="流程分类" prop="type" />
          <el-table-column label="商标名称" prop="subject.sign" width="80" />
          <el-table-column label="客户主体名称" prop="subject.name" />
          <el-table-column label="发起人" prop="starter" width="60" />
          <el-table-column label="处理人" prop="hander" width="60" />
        </BaseTable>
      </el-tab-pane>
      <el-tab-pane label="被动关注">
        开发中....
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<style  lang='scss'>
.item1 {
  background-image: linear-gradient(
    to right bottom,
    rgb(71, 236, 203),
    rgb(158, 205, 93)
  );
}
.item2 {
  background-image: linear-gradient(
    to right bottom,
    rgb(86, 205, 243),
    rgb(113, 157, 227)
  );
}
</style>
